<template>
	<view>
		<!-- <button style="margin: 66px 36px;" @click="showModal"> 生成海报 </button> -->
		<view class="cu-modal" :class="modalName == 'Image' ? 'show' : ''">
			<canvas id="qrcode" canvas-id="qrcode" style="width: 200px;height: 200px;position: fixed; top: -9999px;"></canvas>
			<view class="cu-dialog" v-if="goodsInfo.id && erweimapath && haibaoShow">
				<uni-icons type="closeempty" class="cc-poster-icon" size="12" @tap="hideModal"></uni-icons>
				<view class="bg-img">
					<!-- 自定义生成海报组件 -->
					<!-- @success：成功事件  imgSrc：图片地址 QrSrc：二维码图片地址  Title：标题 PriceTxt：价格 OriginalTxt：原始价格 LineType -->
					<cc-poster v-if="goodsInfo.id && erweimapath" @success="posterSuccess" :imgSrc="goodsInfo.image"
						:QrSrc="erweimapath" :Title="goodsInfo.name" :PriceTxt="0" :OriginalTxt="0" :width="560" :height="990"
						:params="goodsInfo.params" :LineType="false"></cc-poster>
				</view>
			</view>
		</view>
	</view>
</template>
<script>
	import UQRCode from 'uqrcodejs';
	import ccPoster from './components/cc-poster/cc-poster.vue'
	//高德SDK
	export default {
		components: {
			ccPoster
		},
		props: {
			goodsInfo: {
				type: Object,
				default: () => {}
			}
		},
		data() {
			return {
				haibaoImg: null,
				modalName: '',
				haibaoShow: false,
				erweimapath: null,
				goods: null

			};
		},

		mounted() {

		},
		methods: {
			posterSuccess(haibaoImg) {
				this.haibaoImg = haibaoImg;
				this.modalName = 'Image';
			},
			showModal() {
				if (!this.haibaoImg) {
					this.haibaoShow = true;

					uni.showLoading({
						title: '海报生成中...'
					});
					
					this.getErm()

				} else {
					this.modalName = 'Image';
				}
			},
			getErm() {
				const href = window.location.href.split('/#/')[0] + '/#/pages/media/index?id=' +  this.goodsInfo.id
				// 获取uQRCode实例
				var qr = new UQRCode();
				// 设置二维码内容
				qr.data = href;
				// 设置二维码大小，必须与canvas设置的宽高一致
				qr.size = 200;
				// 调用制作二维码方法
				qr.make();
				// 获取canvas上下文
				var canvasContext = uni.createCanvasContext('qrcode', this); // 如果是组件，this必须传入
				// 设置uQRCode实例的canvas上下文
				qr.canvasContext = canvasContext;
				// 调用绘制方法将二维码图案绘制到canvas上
				setTimeout(() => {
					qr.drawCanvas();
				}, 500)
				setTimeout(() => {
					uni.canvasToTempFilePath({
					  x: 0,
					  y: 0,
					  width: 300,
					  height: 300,
					  destWidth: 300,
					  destHeight: 300,
					  canvasId: 'qrcode',
					  success: (res) => {
					    // 在H5平台下，tempFilePath 为 base64
					    this.erweimapath = res.tempFilePath
					  } 
					})
				}, 2000)
			},
			hideModal() {
				this.modalName = null;
			},
		}
	};
</script>
<style lang="scss">
	.cu-modal {
		position: fixed;
		top: 0;
		right: 0;
		bottom: 0;
		left: 0;
		z-index: 1110;
		opacity: 0;
		outline: 0;
		text-align: center;
		-ms-transform: scale(1.185);
		transform: scale(1.185);
		backface-visibility: hidden;
		perspective: 2000upx;
		background: rgba(0, 0, 0, 0.6);
		transition: all 0.3s ease-in-out 0s;
		pointer-events: none;
	}

	.cu-modal::before {
		content: "\200B";
		display: inline-block;
		height: 100%;
		vertical-align: middle;
	}

	.cu-modal.show {
		opacity: 1;
		transition-duration: 0.3s;
		-ms-transform: scale(1);
		transform: scale(1);
		overflow-x: hidden;
		overflow-y: auto;
		pointer-events: auto;
	}

	.cu-dialog {
		position: relative;
		display: inline-block;
		vertical-align: middle;
		margin-left: auto;
		margin-right: auto;
		width: 680upx;
		max-width: 100%;
		// background-color: #f8f8f8;
		border-radius: 10upx;
	}
	
	.cc-poster-icon {
		$ww: 40rpx;
		position: absolute;
		z-index: 2;
		display: block;
		width: $ww;
		height: $ww;
		background: #ffdecb;
		color: #b11213;
		border-radius: $ww;
		text-align: center;
		line-height: $ww;
		right: 78rpx;
		top:28rpx;	
		font-weight: bold;
	}
</style>